<template>
	<view class="recommend">
		<scroll-view class="recommend-list" scroll-x="true">
			<view class="item" v-for="(item ,index) in recommendList" :key="index" :class="selectedIndex == recommendList[index].index ? 'selected' : ''"
			 @tap="changeSelected(recommendList[index].index)">{{item.name}}</view>
		</scroll-view>
		<view class="recommend-content">
			<scroll-view class="scroll-wrap" scroll-x="true" @scroll="scroll">
				<!-- 私塾推荐 -->
				<view class="item" v-if="selectedIndex == 0" @click="gotoDetail()" style="width: 100%;margin-right: 0;">
					<image src="/static/image/index-privatebanner.png" style="display: block;width: 100%;height: 226upx;"></image>
				</view>
				<!-- 名师推荐 -->
				<view class="item" v-if="selectedIndex == 1 && list.length > 0" v-for="(item,index) in list" :key="index">
					<!-- 名师推荐 -->
					<navigator class="wrap" :url="'/pages/free-lesson/teacher-page?teacher_id='+item.teacher_id" hover-class="false">
						<view class="teacher-info">
							<view class="avatar">
								<headimg :realSrc="item.headimg"></headimg>
							</view>
							<view class="summary">
								<text class="name">{{ item.teacher_name == null ? '智慧教育老师' : item.teacher_name }}</text>
								<text class="grade">{{ item.impression == null ? '暂无标签' : item.impression }}</text>
							</view>
						</view>
						<view class="personality">{{ item.sketch == null ? '暂无简介' : item.sketch }}</view>
					</navigator>
				</view>
				<view v-if="selectedIndex == 1 && list.length == 0" class="noneData">暂无数据</view>
				<view class="ming-ke" v-if="selectedIndex == 2" v-for="(item,index) in list" :key="index" @click="gotoDetail(item)">
					<view class="content-left">
						<view class="subject">{{item.subjectName}}</view>
						<view class="subject-name">{{item.course_title}}</view>
						<view class="subject-time">
							<view>{{ item.start_month }}-{{ item.end_month }}</view>
						</view>
						<view class="image-toux">
							<view class="i-item" v-for="(tItem,index) in item.figureimgsList" :key="index">
								<image class="img" :src="tItem"></image>
								<view class="t-name">{{item.teacherNames[index]}}</view>
							</view>
						</view>
					</view>
					<view class="content-right">
						<view class="price-msg">
							<view class="new-price">￥{{item.course_real_price / 100}}</view>
							<view class="old-price">￥{{item.course_price / 100}}</view>
						</view>
						<view class="buy-msg">
							<view class="buy-count">剩余{{item.course_store}}份</view>
							<view class="over-time" v-if="item.enrol_end_time > 0">距离结束{{item.enrol_end_time}}天</view>
							<view class="over-time" v-else>已结束</view>
						</view>
					</view>
				</view>
				<view style="width: 630upx;" v-if="selectedIndex == 3">
					<view class="ming-xiao">
						<view class="picture-name">
							<view class="picture">
								<image :src="defimg"></image>
							</view>
							<view class="name">北京大学</view>
						</view>
						<view class="msg">北京大学创办于1898年，初名京师大学堂，是中国第一所国立综合性大学，也是当时中国最高教育行</view>
					</view>
				</view>
				<view class="xue-nao-box" v-if="selectedIndex === 4 && list.length > 0">
					<view class="xue-bao" v-for="(item,index) in list" :key="index" @click="gotoDetail(item)">
						<view class="name">{{item.package_name}}</view>
						<view class="msg">
							<view class="zhangjie">章节数：{{item.package_num}}</view>
							<view class="ziyuan">资源数：{{item.resource_num}}</view>
						</view>
						<view class="price">￥{{item.price}}</view>
						<view class="acount">已售{{item.sales_num}}人</view>
					</view>
				</view>
				<view style="width: 630upx;" v-if="selectedIndex == 5" @click="gotoDetail(item)">
					<view class="ming-xiao">
						<view class="picture-name">
							<view class="picture"><image src="/static/image/logo.png"></image></view>
							<view class="name">王晓鹏学霸</view>
						</view>
						<view class="msg">2019年湖北文科状元，北京大学录取通知书，总分760份</view>
					</view>
				</view>
				<view v-if="selectedIndex != 6 && selectedIndex != 0 && list.length == 0" class="noneData">暂无数据</view>
				<view class="xue-nao-box" v-if="selectedIndex === 6">
					<list :list='news' :status="status" :contentText="contentText" stateType="0"  :users_type="2" :isShowMore="false"></list>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import list from '@/components/school/artlist.vue'
	import headimg from '@/components/head_img.vue'
	export default {
		components: {
			list,
			headimg
		},
		data() {
			return {
				list: [], // 推荐数据数组
				recommendList: [{
						name: '私塾推荐',
						index: 0
					}, {
						name: '名师推荐',
						index: 1
					}, {
						name: '名课推荐',
						index: 2
					},
					// {
					// 	name: '名校推荐',
					// 	index: 3
					// },
					{
						name: '学包推荐',
						index: 4
					},
					// {
					// 	name: '学霸推荐',
					// 	index: 5
					// },
					{
						name: '抖教推荐',
						index: 6
					}
				],
				selectedIndex: 0,
				old: {
					scrollTop: 0
				},
				subjectList: [], // 科目列表
				news: [],
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				defimg: this.defimg
			};
		},
		created() {
			this.getData(0)
			this.getSubjectList()
			this.getList()
		},
		methods: {
			// 前往详情
			gotoDetail(item) {
				switch (this.selectedIndex) {
					case 0:
						// 前往私塾
						uni.navigateTo({
							url: '../private-school/index'
						})
						break;
					case 1:
						// 前往教师主页
						uni.navigateTo({
							url: '../free-lesson/teacher-page?teacher_id=' + item.teacher_id
						})
						break;
					case 2:
						// 前往名课详情
						uni.navigateTo({
							url: '../free-lesson/lesson-detail?course_id=' + item.course_id
						})
						break;
					case 4:
						// 前往学包详情
						uni.navigateTo({
							url: '../package/packagedetail?package_id=' + item.unid
						})
						break;
					case 5:
						// 前往学霸主页
						uni.navigateTo({
							url: '../strong-student/student-page'
						})
						break;
				}
			},
			// 推荐
			getData(type) {
				let url = ''
				switch (type) {
					case 1:
						// 名师
						url = 'stu/recommend/teacher/infos'
						break
					case 2:
						// 课程
						url = 'stu/recommend/course/infos'
						break
					case 4:
						// 学包
						url = 'adminapi/moblie/recommend/package'
						break
				}
				if (type == 1 || type == 2) {
					this.$zbapi.apiPost(url).then(res => {
						if (res.data.code == 0) {
							this.list = res.data.data.list
							if (type == 2) {
								// 处理科目
								this.list.forEach(item => {
									// 处理时间
									item.start_month = util.getnewTime(item.teach_start_day)
									item.end_month = util.getnewTime(item.teach_end_day)
									let now = parseInt(Date.now() / 1000)
									let enrol = 0
									if (item.enrol_end_time - now > 0) {
										enrol = parseInt((item.enrol_end_time - now) / 86400) // 获取截止日期
									} else {
										enrol = 0
									}
									item.enrol_end_time = enrol
									item.figureimgsList = !item.figureimgs ? [] : item.figureimgs.split(',')
									item.teacherNames = !item.teacher_name ? [] : item.teacher_name.split(',')
									if (item.figureimgsList.length > 4) item.figureimgsList.splice(4, item.figureimgsList.length - 4)
									// 处理科目名
									this.subjectList.forEach(item2 => {
										if (item2.subject_id == item.subject_id) {
											item.subjectName = item2.subject_name
										}
									})
								})
							}
						} else {
							this.list = []
						}
					})
				} else if (type == 4) {
					this.$papi.apiPost(url).then(res => {
						if (res.data.code == 200) {
							var arr = res.data.data.list
							this.list = []
							// 过滤学包课包
							arr.forEach(item => {
								// 学包
								if (item.package_type == 2) {
									this.list.push(item)
								}
							})
						}
					})
				}
			},
			changeSelected: function(index) {
				this.selectedIndex = index
				this.getData(index)
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			/* 获取文章列表 */
			getList() {
				var data = {
					is_check: 2, //2通过 仅查看通过审核的文章
					page: this.page,
					pagesize: 8,
					users_type: 2	// 2抖教
				}
				this.$zapi.apiPost('user/article.Lists/articleList', data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getBriefTime(list[i].creat_time);
							if (list[i].subhead_creat_time) {
								list[i].ftime = util.getBriefTime(list[i].subhead_creat_time);
							}
						}
						this.news = this.reload ? list : this.news.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.news = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			// 获取名课的科目列表
			getSubjectList() {
				this.$zbapi.apiPost('common/subject').then(res => {
					if (res.data.code == 0) {
						this.subjectList = res.data.data
					}
				})
			}
		}
	};
</script>
</script>

<style scoped lang="scss">
	/* 推荐 */
	.recommend {
		width: 100%;
		margin: 20upx auto 34upx;
		padding-top: 10upx;
		background: #FFFFFF;
		border-radius: 20upx;
		
		.recommend-list {
			width: 100%;
			margin: 0 auto;
			white-space: nowrap;
		
			.item {
				margin-left: 30upx;
				color: #333;
				height: 68upx;
				line-height: 68upx;
				font-size: 24upx;
				position: relative;
				display: inline-block;
			}
		
			.selected {
				font-size: 34upx;
				font-weight: bold;
			}
		
			.selected::before {
				content: '';
				position: absolute;
				width: 80upx;
				height: 8upx;
				background: #FF9900;
				margin-left: 30upx;
				bottom: 0upx;
				border-radius: 4upx;
			}
		}

		// 左右滑动scoll-view样式
		.recommend-content {
			width: 630upx;
			margin: 0 auto;
			margin-top: 40upx;
			padding-bottom: 34upx;
			
			.scroll-wrap{
				min-height: 248upx;
				width: 100%;
				white-space: nowrap;
				
				.noneData {
					font-size: 28upx;
					color: #999999;
					text-align: center;
					line-height: 226upx;
				}
				
				.item {
					display: inline-block;
					margin-right: 20upx;
					
					.wrap {
						padding: 20upx;
						width: 360upx;
						border-radius: 20upx;
						background: #FAFAFA;
						white-space: normal;
						height: calc(100% - 40upx);
					
						.teacher-info {
							display: flex;
							align-items: center;
					
							.avatar {
								border-radius: 50%;
								width: 80upx;
								height: 80upx;
								overflow: hidden;
								flex: none;
							}
					
							.summary {
								display: flex;
								flex-direction: column;
								margin-left: 10upx;
								width: 90%;
					
								.name {
									font-size: 32upx;
									font-weight: bold;
									color: #333333;
								}
					
								.grade {
									font-size: 26upx;
									color: #999999;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									max-width: 90%;
								}
							}
						}
					
						.personality {
							display: flex;
							margin-top: 22upx;
							color: #666666;
							font-size: 26upx;
							line-height: 42upx;
							letter-spacing: 2upx;
							word-wrap: break-word;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							height: 84upx;
						}
					}
				}
			}
			
			
		}

		// 名课推荐
		.ming-ke {
			width: 630upx;
			margin: 0 auto;
			// display: flex;
			// flex-direction: row;
			border-radius: 20upx;
			background: #FAFAFA;
			height: 100%;
			display: inline-block;
			position: relative;
			margin-right: 20upx;

			.content-left {
				width: 436upx;
				padding-left: 30upx;

				.subject {
					width: 58upx;
					height: 32upx;
					font-size: 24upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 32upx;
					border-radius: 0 0 8upx 8upx;
					background: #00D5A2;
				}

				.subject-name {
					font-size: 34upx;
					color: #333333;
					font-weight: bold;
				}

				.subject-time {
					display: flex;
					flex-direction: row;

					view {
						font-size: 24upx;
						color: #999999;
					}

					.shu {
						padding: 0 6upx;
					}
				}

				.image-toux {
					width: 100%;
					display: flex;
					flex-direction: row;

					.i-item {
						height: 60upx;
						display: flex;
						flex-direction: row;
						margin-top: 32upx;
						margin-bottom: 32upx;
						margin-right: 40upx;

						.img {
							width: 60upx;
							height: 60upx;
							border-radius: 60upx;
							object-fit: cover;
						}

						.t-name {
							font-size: 26upx;
							color: #666666;
							line-height: 60upx;
							padding-left: 20upx;
						}
					}
				}
			}

			.content-right {
				width: 144upx;
				padding-top: 36upx;
				margin-left: 20upx;
				position: absolute;
				right: 0;
				top: 0;

				.price-msg {
					.new-price {
						font-size: 36upx;
						color: #FF9900;
						height: 50upx;
					}

					.old-price {
						font-size: 26upx;
						height: 30upx;
						color: #CCCCCC;
						text-align: center;
						position: relative;
					}

					.old-price::before {
						content: '';
						width: 84upx;
						height: 1px;
						background: #CCCCCC;
						position: absolute;
						top: 23upx;
					}
				}

				.buy-msg {
					margin-top: 38upx;
					margin-bottom: 24upx;
					margin-left: -20upx;

					.buy-count,
					.over-time {
						font-size: 20upx;
						color: #666666;
					}
				}
			}
		}

		// 名校推荐
		.ming-xiao {
			background: #FAFAFA;
			display: inline-block;
			padding: 20upx 20upx 26upx 20upx;
			border-radius: 20upx;

			.picture-name {
				display: flex;
				flex-direction: row;

				.picture {
					width: 92upx;
					height: 92upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 46upx;
					}
				}

				.name {
					margin-left: 24upx;
					font-size: 32upx;
					color: #333333;
					font-weight: bold;
					line-height: 92upx;
				}
			}

			.msg {
				width: 100%;
				margin-top: 6upx;
				white-space: pre-wrap;
				font-size: 26upx;
				color: #666666;
			}
		}

		// 学包推荐
		.xue-nao-box {
			width: 630upx;
			margin: 0 auto;
			min-height: 226upx;
			border-radius: 0 0 8upx 8upx;

			.xue-bao {
				padding: 20upx 30upx;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				background: #FAFAFA;
				display: inline-block;
				margin-right: 20upx;
				border-radius: 20upx;

				.name {
					font-size: 36upx;
					color: #333333;
					font-weight: bold;
				}

				.msg {
					display: flex;
					flex-direction: row;

					.zhangjie {
						margin-right: 46upx;
					}

					.ziyuan,
					.zhangjie {
						font-size: 24upx;
						color: #999999;
					}
				}

				.price {
					font-size: 44upx;
					color: #333333;
					font-weight: bold;
				}

				.price,
				.acount {
					text-align: right;
				}

				.acount {
					position: relative;
					bottom: 10upx;
					font-size: 24upx;
					color: #FF7171;
				}
			}
		}
	}
	.news {
		padding: 0 !important;
		width: 100%;
	}
</style>
